<template>
    <div id="home">
        <nav-bar class="home-nav"> <div slot="center">购物街</div></nav-bar>
         <tab-control   :titles="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl1" class="tab-control" v-show="isTabFixed"></tab-control>
        <scroll class="content" ref="scroll" 
        :probe-type="3" 
        @scroll="contentScroll" 
        :pull-up-load="true" 
        @pullingUp="loadMore">
        <home-swiper :banner="banner" @swiperImageLoad="swiperImageLoad"></home-swiper>
        <recommend-view :recommends="recommend"></recommend-view>
        <feature></feature>
        <tab-control   :titles="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl2" ></tab-control>
        <goods-list :goods="showGoods"></goods-list>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import Feature from './childComps/Feature'


import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'


import {getHomeMultidata,getHomeGoods}from 'network/home'
import {debounce} from 'common/utils'








export default {
    name:"Home",
    components:{
        HomeSwiper,
        RecommendView,
        Feature,
        NavBar ,  
        TabControl,
        GoodsList,
        Scroll,
        BackTop
        
  
    },
    data(){
        return{
           banner :[],
           recommend:[],
           goods:{
               'pop':{page:0,list:[]},
               'new':{page:0,list:[]},
               'sell':{page:0,list:[]},
           },
           currentType:'pop',
           isShowBackTop:false,
           tabOffsetTop:0,
           isTabFixed:false,
           saveY:0
        }
    },
    computed:{
        showGoods(){
            return this.goods[this.currentType].list
        }
    },
    activeated(){
        this.$refs.scroll.scrollTo(0,this.saveY,0)
        this.$refs.scroll.refresh()
    },
    deactivated(){
        this.saveY=this.$refs.scroll.scroll.y
    },

    //生命周期函数--组件创建完进行
    created(){
        //1.请求多个数据axios
      this.getHomeMultidata()
        //请求商品数据
       this.getHomeGoods('pop')
       this.getHomeGoods('new')
       this.getHomeGoods('sell')   
    
    },
    mounted(){
    const refresh=debounce(this.$refs.scroll.refresh,50)
   //监听item中图片加载完成//接收订阅
       this.$bus.$on('itemImageLoad',()=>{
           refresh()
       })
     
    },
    methods:{

      
        //事件监听方法
        tabClick(index){
           switch(index){
               case 0:
                   this.currentType="pop";
                   break
                   case 1:
                   this.currentType="new";
                   break
                   case 2:
                   this.currentType="sell";
                   break
           }
           //解决同步
           this.$refs.tabControl1.currentIndex=index
           this.$refs.tabControl2.currentIndex=index
        },
        //返回顶部
        backClick(){
            this.$refs.scroll.scrollTo(0,0,700)
        },
        //拿到位置
        contentScroll(position){
            //1.判断backtop是否显示
            if(position.y<-1000){
                this.isShowBackTop=true
            }else{
                this.isShowBackTop=false
            }
            //2.决定tabControl是否吸顶(postition:fixed)
            this.isTabFixed=(-position.y)>this.tabOffsetTop
        },
        //加载更多
        loadMore(){
           this.getHomeGoods(this.currentType)
        },
        swiperImageLoad(){
     //赋值
         this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
        },


        //网络请求
        getHomeMultidata(){
             getHomeMultidata().then(res=>{
            this.banner=res.data.banner.list;
            this.recommend=res.data.recommend.list
        })
        },
        getHomeGoods(type){
            let page=this.goods[type].page+1
             getHomeGoods(type,page).then(res=>{
             this.goods[type].list.push(...res.data.list)
             this.goods[type].page+=1

             //连续加载
            this.$refs.scroll.finishPullUp()
        })
        }
    }
}
</script>

<style scoped>
#home{
    /* padding-top: 44px; */
    height: 100vh;
    position: relative;
   
}
.home-nav{
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
    background-color: var(--color-tint);
    color: #fff;
}
.tab-control{
    position: relative;
    z-index: 9;
}
.content{
    /* height: 300px; */
    
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    overflow: hidden;
}

</style>